<template>
  <div class="app-container">
    <el-tabs v-model="verifyStatus" type="card" @tab-click="handleClickVerifyStatus">
      <el-tab-pane name="-1">
        <span slot="label">
          <i class="el-icon-s-order"></i> 全部商品
        </span>
      </el-tab-pane>
      <el-tab-pane name="0">
        <span slot="label">
          <i class="el-icon-document"></i> 待审核
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          <i class="el-icon-document"></i> 审核通过
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          <i class="el-icon-circle-close"></i> 审核不通过
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="商品ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入商品ID"
          clearable
          size="small"
          maxlength="40"
          show-word-limit
          class="inputClass"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入商品名称"
          maxlength="30"
          show-word-limit
          clearable
          size="small"
          class="inputClass"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上架状态" prop="shelf">
        <el-select
          v-model="queryParams.shelf"
          placeholder="上架状态"
          class="inputClass"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.goods_shelf_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上架渠道" prop="deviceType">
        <el-select
          v-model="queryParams.deviceType"
          placeholder="上架渠道"
          clearable
          style="width: 240px"
          multiple
        >
          <el-option
            v-for="dict in dict.type.app_device_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="适配车型" prop="modelName">
        <el-input
          v-model="queryParams.modelName"
          placeholder="请输入适配车型"
          clearable
          size="small"
          maxlength="40"
          show-word-limit
          class="inputClass"
          @keyup.enter.native="handleQuery"
        />
        <!--<el-select-->
        <!--v-model="queryParams.modelName"-->
        <!--placeholder="请选择"-->
        <!--filterable-->
        <!--clearable-->
        <!--style="width: 240px"-->
        <!--@change="onSelectChange"-->
        <!--&gt;-->
        <!--<el-option-->
        <!--v-for="item in carModelList"-->
        <!--:key="item.modelCode"-->
        <!--:label="item.modelName"-->
        <!--:value="item.modelName"-->
        <!--&gt;-->
        <!--</el-option>-->
        <!--</el-select>-->
      </el-form-item>
      <el-form-item label="商品类目" prop="categoryId">
        <el-input
          v-model="queryParams.categoryId"
          placeholder="请输入商品类目"
          clearable
          size="small"
          maxlength="40"
          show-word-limit
          class="inputClass"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleCreate"
          v-hasPermi="['shop:goods:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-upload"
          size="mini"
          :disabled="multiple"
          @click="batchShelf('1')"
          v-hasPermi="['shop:goods:edit']"
        >批量上架</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-download"
          size="mini"
          :disabled="multiple"
          @click="batchShelf('2')"
          v-hasPermi="['shop:goods:edit']"
        >批量下架</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-guide"
          size="mini"
          :disabled="multiple"
          @click="batchVerify('1')"
          v-hasPermi="['shop:goods:verify']"
        >批量通过审核</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-guide"
          size="mini"
          :disabled="multiple"
          @click="batchVerify('2')"
          v-hasPermi="['shop:goods:verify']"
        >批量拒绝审核</el-button>
      </el-col>
      <!--
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['shop:goods:export']"
        >导出</el-button>
      </el-col>
      -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="tableColumns"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="goodsList"
      element-loading-text="正在查询中。。。"
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <!--
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand">
            <el-form-item label="商品ID:">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称:">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品副标题:">
              <span>{{ props.row.introduction }}</span>
            </el-form-item>
            <el-form-item label="商品图片:">
              <img
                class="imgClass"
                v-for="pic in props.row.picUrls"
                :key="pic"
                :src="pic"
                width="88"
                height="88"
              >
            </el-form-item>

            <el-form-item label="车系:">
              <el-tag v-show="props.row.series!=''" type="warning">{{ props.row.series }}</el-tag>
            </el-form-item>

            <el-form-item label="车型:">
              <el-tag v-for="modelName in props.row.modelName" type="primary">{{ modelName }}</el-tag>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      -->
      <el-table-column align="center" label="审核人" key="verifyUser" prop="verifyUser" v-if="false"/>
      <el-table-column
        align="center"
        label="商品类目"
        key="categoryId"
        prop="categoryId"
        v-if="tableColumns[0].visible"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.categoryId?JSON.parse(scope.row.categoryId)['name']:''  }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="商品ID"
        key="id"
        prop="id"
        v-if="tableColumns[1].visible"
      />
      <el-table-column
        align="center"
        min-width="100"
        label="商品名称"
        prop="name"
        key="name"
        v-if="tableColumns[2].visible"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        align="center"
        min-width="100"
        label="商品副标题"
        prop="introduction"
        key="introduction"
        v-if="tableColumns[3].visible"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="图片"
        align="center"
        prop="url"
        key="url"
        v-if="tableColumns[4].visible"
        width="120"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px;"
            :src="scope.row.picUrls[0]"
            :preview-src-list="[scope.row.picUrls[0]]"
          />
        </template>
      </el-table-column>
      <!--
      <el-table-column align="center" label="详情" prop="detail">
        <template slot-scope="scope">
          <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
            <div class="goods-detail-box" v-html="goodsDetail"/>
          </el-dialog>
          <el-button
            type="primary"
            icon="el-icon-info"
            size="mini"
            @click="showDetail(scope.row.description)"
          >查看</el-button>
        </template>
      </el-table-column>
      -->
      <el-table-column
        align="center"
        label="价格"
        prop="price"
        key="price"
        v-if="tableColumns[5].visible"
      >
        <template slot-scope="scope">
          <span
            style="color:red;font-size:2px;"
          >{{ scope.row.priceDown == scope.row.priceUp ? '￥'+scope.row.priceDown : '￥'+scope.row.priceDown+'~￥'+ scope.row.priceUp}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="上架渠道"
        align="center"
        key="deviceType"
        prop="deviceType"
        v-if="tableColumns[6].visible"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.app_device_type" v-for="(item,index) in scope.row.deviceType.split(',')" :key="index" :value="item"/>
        </template>
      </el-table-column>

      <el-table-column
        label="排序"
        align="center"
        prop="sort"
        key="sort"
        v-if="tableColumns[7].visible"
        width="180"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.sort"
            controls-position="right"
            :min="0"
            :max="10000"
            :precision="0"
            :step="1"
            class="sortClass"
            ref="refNumber"
            @change="(currentValue,oldValue) => {sortChange(currentValue,oldValue,scope.row)}"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="适配车型"
        align="center"
        key="modelName"
        prop="modelName"
        v-if="tableColumns[8].visible"
      />
      <!--<el-table-column-->
      <!--label="商品类型"-->
      <!--align="center"-->
      <!--key="saleState"-->
      <!--prop="saleState"-->
      <!--v-if="tableColumns[9].visible"-->
      <!--&gt;-->
      <!--<template slot-scope="scope">-->
      <!--<el-tag>{{ ['标配', '售卖'][scope.row.saleState] }}</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->

      <el-table-column
        align="center"
        label="规格类型"
        key="specType"
        prop="specType"
        v-if="tableColumns[9].visible"
      >
        <template slot-scope="scope">
          <!--<el-tag-->
          <!--:type="scope.row.specType == '0' ? 'success' : 'danger' "-->
          <!--&gt;{{ scope.row.specType == '0' ? '统一规格' : '单规格' }}</el-tag>-->
          <el-tag v-show="scope.row.specType == '0'" type="danger">单一规格</el-tag>
          <el-tag v-show="scope.row.specType == '1'" type="danger">通用规格</el-tag>
          <el-tag v-show="scope.row.specType == '2'" type="danger">多规格</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="上架状态"
        prop="shelf"
        key="shelf"
        v-if="tableColumns[10].visible"
      >
        <template slot-scope="scope">
          <el-tag v-show="scope.row.shelf == '0'" type="warning">待上架</el-tag>
          <el-tag v-show="scope.row.shelf == '1'" type="success">已上架</el-tag>
          <el-tag v-show="scope.row.shelf == '2'" type="danger">已下架</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="审核状态"
        prop="verifyStatus"
        key="verifyStatus"
        v-if="tableColumns[11].visible"
        width="140"
      >
        <template slot-scope="scope">
          <el-tag v-show="scope.row.verifyStatus == '0'" type="warning">待审核</el-tag>
          <el-tag v-show="scope.row.verifyStatus == '1'" type="success">审核通过</el-tag>
          <el-tag v-show="scope.row.verifyStatus == '2'" type="danger">审核不通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        min-width="100"
        label="审核明细"
        prop="verifyDetail"
        key="verifyDetail"
        v-if="tableColumns[12].visible"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createDate"
        key="createDate"
        v-if="tableColumns[13].visible"
        width="160"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['shop:goods:get']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['shop:goods:edit']"
            v-if="scope.row.shelf != '1'"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['shop:goods:del']"
            v-if="scope.row.verifyStatus=='2'"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-guide"
            @click="verifyDetail(scope.row)"
            v-if="scope.row.verifyStatus!='0'"
          >审核详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 审核详情 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="viewRow" label-width="80px">
        <el-form-item label="审核状态">
          <el-select v-model="viewRow.verifyStatus" clearable style="width: 380px" disabled="true">
            <el-option
              v-for="dict in dict.type.goods_verify_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="dictType">
          <el-input v-model="viewRow.verifyUser" disabled="true"/>
        </el-form-item>

        <el-form-item label="审核明细" prop="remark">
          <el-input v-model="viewRow.verifyDetail" type="textarea" disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listGoods,
    getGoods,
    delGoods,
    editSort,
    exportGoods,
    shelfGoods,
    verifyGoods
  } from "@/api/shop/goods";
  import {
    getModelListUrl,
  } from "@/api/statistics/index.js";
  import Pagination from "@/components/Pagination";
  export default {
    name: "Goods",
    dicts: [
      "sys_normal_disable",
      "goods_shelf_status",
      "goods_verify_status",
      "app_device_type"
    ],
    components: { Pagination },
    data() {
      return {
        // table列筛选
        tableColumns: [
          { key: 0, label: `商品类目`, visible: true },
          { key: 1, label: `商品ID`, visible: true },
          { key: 2, label: `商品名称`, visible: true },
          { key: 3, label: `商品副标题`, visible: true },
          { key: 4, label: `图片`, visible: true },
          { key: 5, label: `价格`, visible: true },
          { key: 6, label: `上架渠道`, visible: true },
          { key: 7, label: `排序`, visible: true },
          { key: 8, label: `适配车型`, visible: true },
          // { key: 9, label: `商品类型`, visible: true },
          { key: 9, label: `规格类型`, visible: true },
          { key: 10, label: `上架状态`, visible: true },
          { key: 11, label: `审核状态`, visible: true },
          { key: 12, label: `审核明细`, visible: true },
          { key: 13, label: `创建时间`, visible: true }
        ],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        viewRow: {},
        selectRows: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品基本信息表格数据
        goodsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // orderByColumn:undefined,默认时间
          id: undefined,
          name: undefined,
          shelf: undefined,
          sortOrder: undefined,
          verifyStatus: undefined,
          deviceType: undefined,
          modelName: undefined,
          categoryId: undefined
        },
        verifyStatus: "-1",
        goodsDetail: "",
        detailDialogVisible: false,
        downloadLoading: false,
        sortChangeTimer: null,
        carModelList: [],
      };
    },
    created() {
      this.handleQuery();
    },
    async mounted() {
      await this.getCarModelList();
    },
    methods: {
      /**
       * 获取车型数据
       */
      getCarModelList() {
        return new Promise((resolve) => {
          getModelListUrl().then((res) => {
            if (res.data) {
              this.carModelList = res.data;
            }
            resolve(true);
          });

          // this.carModelList = res.data
        });
      },
      onSelectChange(e) {
        if(!this.queryParams.modelName){
          this.queryParams.modelName = undefined;
        }
      },
      /** 查询商品基本信息列表 */
      getList() {
        this.loading = true;
        let params = JSON.parse(JSON.stringify(this.queryParams))
        // params.deviceType = params.deviceType ? params.deviceType.join(',') : ''
        listGoods(params).then(response => {
          this.goodsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        this.loading = false;
// =======
//         this.goodsList = response.data.records
//         this.total = response.data.total
//         this.loading = false
//       })
//       this.loading = false
// >>>>>>> denza-dev
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 搜索按钮操作 */
      handleQuery() {
// <<<<<<< HEAD
        this.queryParams.pageNum = 1;
        this.getList();
// =======
//       this.queryParams.current = 1
//       this.getList()
// >>>>>>> denza-dev
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.selectRows = selection;
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      handleCreate() {
        this.$router.push({ path: "/shop/goods/create" });
      },
      handleUpdate(row) {
        this.$router.push({ path: "/shop/goods/edit", query: { id: row.id } });
      },
      handleDetail(row) {
        this.$router.push({ path: "/shop/goods/detail", query: { id: row.id } });
      },
      batchShelf(shelf) {
        if (this.ids.length <= 0) {
          this.$message.error("请选择商品");
          return false;
        }
        if (shelf == "1") {
          for (var i = 0; i < this.selectRows.length; i++) {
            if (
              this.selectRows[i].verifyStatus == "0" ||
              this.selectRows[i].verifyStatus == "2"
            ) {
              this.$message.error("已审核商品才能上架！");
              return false;
            }
          }
        }
        if(shelf == "2"){
          for (var i = 0; i < this.selectRows.length; i++) {
            if (this.selectRows[i].shelf == "2") {
              this.$message.error("已经下架的商品不能在下架！");
              return false;
            }
          }
        }
        let selectionIds = "";
        this.ids.forEach(id => {
          selectionIds += id + ",";
        });
        var param = {
          shelf: shelf,
          ids: selectionIds
        };
        shelfGoods(param).then(data => {
          this.getList();
        });
      },

      showDetail(detail) {
        this.goodsDetail = detail;
        this.detailDialogVisible = true;
      },
      batchVerify(verifyStatus) {
        if (this.ids.length <= 0) {
          this.$message.error("请选择商品");
          return;
        }

        this.$prompt("请输入审核明细", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(({ value }) => {
          let selectionIds = "";
          this.ids.forEach(id => {
            selectionIds += id + ",";
          });
          if (value != "" && value != undefined && value.length > 40) {
            this.$message.error("审核明细内容不能超过40");
            return;
          }
          verifyGoods({
            ids: selectionIds,
            verifyStatus: verifyStatus,
            verifyDetail: value
          }).then(data => {
            this.getList();
          });
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id;
        this.$confirm(
          '是否确认删除商品基本信息编号为"' + ids + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(function() {
            return delGoods(ids);
          })
          .then(() => {
            this.handleQuery();
            this.msgSuccess("删除成功");
          })
          .catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有商品基本信息数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(function() {
            return exportGoods(queryParams);
          })
          .then(response => {
            this.download(response.message);
          })
          .catch(function() {});
      },
      handleClickVerifyStatus(tab, event) {
        this.verifyStatus = tab.name;
        this.queryParams.verifyStatus =
          this.verifyStatus != "-1" ? this.verifyStatus : null;
        this.getList();
      },
      sortChange(currentValue, oldValue, row) {
        if (!this.sortChangeTimer) {
          this.sortChangeTimer = setTimeout(() => {
            next(currentValue, oldValue, row);
          }, 300);
        } else {
          clearTimeout(this.sortChangeTimer);
          this.sortChangeTimer = null;

          this.sortChangeTimer = setTimeout(() => {
            next(currentValue, oldValue, row);
          }, 300);
        }

        let vm = this;
        function next(currentValue, oldValue, row) {
          debugger
          var id = row.id;
          if(currentValue == undefined){
            vm.$message.error("排序值不能为空");
            return;
          }
          if (currentValue > 10000 || currentValue < 0) {
            vm.$message.error("排序值只能在0~10000");
            return;
          }
          const goodSpu = {
            id: id,
            sort: currentValue
          };
          vm.$confirm("是否确认修改商品排序值为：" + currentValue + "?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(function() {
              return editSort(goodSpu);
            })
            .then(() => {
              vm.handleQuery();
              vm.msgSuccess("修改成功");
            })
            .catch(() => {
              vm.getList();
            });
        }
      },
      verifyDetail(row) {
        this.open = true;
        this.title = "审核详情";
        this.viewRow = row;
      },
      // 取消按钮
      cancel() {
        this.open = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .table-expand {
    font-size: 0;
    margin-left: 50px;
    margin-right: 50px;
  }
  .table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-top: 20px;
  }
  .gallery {
    width: 80px;
    margin-right: 10px;
  }
  .goods-detail-box img {
    width: 100%;
  }
  .imgClass {
    margin-right: 10px;
  }
  .sortClass {
    width: 130px;
  }
  .inputClass {
  }
  /* element-ui input style overload */
  ::v-deep .inputClass > input {
    padding-right: 70px !important;
  }
</style>
